<template>
  <j-modal
    :title="title"
    :width="width"
    :visible="visible"
    switchFullscreen
    :okButtonProps="{ class: { 'jee-hidden': disableSubmit } }"
    @cancel="handleCancel"
    :cancelText="$t('关闭')"
  >
  <template slot="footer">
    <a-row :gutter="20">
      <a-col :span="24">
        <span style="float: left; font-weight: bolder">
          {{$t('备注')}}：
          <span>{{ model.comment }}</span>
        </span>
        <a-button @click="handleCancel">{{$t('取消')}}</a-button>
      </a-col>
    </a-row>
  </template>
    <a-form :model="model">
      <a-row>
        <a-col :span="7">
          <a-form-item :label="$t('盘点仓库')" :labelCol="{ span: 5}" :wrapperCol="{ span: 18 }">{{model.store_dictText}}
          </a-form-item>
        </a-col>
        <a-col :span="17">
          <a-button type="primary" style="float: right;" icon="download" @click="handleExportXls($t('盘点明细报表'))">{{$t('导出')}}</a-button>
        </a-col>
      </a-row>
      <div>
        <span style="font-weight: bold">{{$t('商品列表')}}：</span>
         <a-table
          :columns="columns"
          :dataSource="dataSource"
          size="middle"
          bordered
          class="j-table-force-nowrap"
          :pagination="false"
          style="padding-left: 11px"
        >
        </a-table>
      </div>

    </a-form>
  </j-modal>
</template>

<script>
import { httpAction, getAction,downFile } from '@/api/manage'
import { postAction } from '../../../api/manage'
let _self
export default {
  name: 'StockDetailModal',
  components: {},
  data() {
    return {
      title: this.$t('详情'),
      width: 1100,
      visible: false,
      disableSubmit: false,
      model: {
        goodsId: '',
      },

      columns: [
        {
          title: this.$t('序号'),
          dataIndex: '',
          key: 'rowIndex',
          align: 'center',
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          },
        },
        {
          title: this.$t('商品名称'),
          dataIndex: 'goods',
          align: 'center',
          customRender:function(text){
            if(text){
              return text[0].name
            }else{
              return ''
            }
          }
        },
        {
          title: this.$t('系统数量'),
          key: 'systemStock',
          dataIndex: 'systemStock',
          customHeaderCell: function (column) {
            return {
              style: {
                textAlign: 'center',
              },
            }
          },
          customCell: function (record, rowIndex) {
            return {
              style: {
                textAlign: 'right',
              },
            }
          },
        },
        {
          title: this.$t('实盘数量'),
          key: 'actualStock',
          dataIndex: 'actualStock',
          customHeaderCell: function (column) {
            return {
              style: {
                textAlign: 'center',
              },
            }
          },
          customCell: function (record, rowIndex) {
            return {
              style: {
                textAlign: 'right',
              },
            }
          },
        },
        {
          title: this.$t('差异'),
          key: 'error',
          dataIndex: 'error',
          customHeaderCell: function (column) {
            return {
              style: {
                textAlign: 'center',
              },
            }
          },
          customCell: function (record, rowIndex) {
            return {
              style: {
                textAlign: 'right',
              },
            }
          },
        },
        {
          title: this.$t('备注'),
          key: 'comment',
          dataIndex: 'comment',
          align: 'center',
        },
      ],
      dataSource: [],
      url:{
        exportXlsUrl:'/goods/bisGoodsInventoryDetails/exportXls'
      }
    }
  },
  created(){
    _self = this
  },
  methods: {
    add() {
      this.visible = true
      this.edit()
    },
    edit(record) {
      console.log(record)
      this.visible = true
      this.model = Object.assign({},record)
      this.getOrderDetail()
    },
    getOrderDetail(){
       getAction('/goods/bisGoodsInventory/queryBisGoodsInventoryDetailsByMainId',{id:this.model.id}).then(res=>{
        this.dataSource = res.result
      })
    },
    close() {
      this.$emit('close')
      this.visible = false
    },
    submitCallback() {
      this.$emit('ok')
      this.visible = false
    },
    handleCancel() {
      this.close()
    },
    handleExportXls(fileName) {
      if (!fileName || typeof fileName != 'string') {
        fileName = this.$t('导出文件')
      }
      let param = {}
      param.orderId = this.model.id
      console.log('导出参数', param)
      downFile(this.url.exportXlsUrl, param).then((data) => {
        if (!data) {
          this.$message.warning(this.$t('文件下载失败'))
          return
        }
        if (typeof window.navigator.msSaveBlob !== 'undefined') {
          window.navigator.msSaveBlob(new Blob([data], { type: 'application/vnd.ms-excel' }), fileName + '.xls')
        } else {
          let url = window.URL.createObjectURL(new Blob([data], { type: 'application/vnd.ms-excel' }))
          let link = document.createElement('a')
          link.style.display = 'none'
          link.href = url
          link.setAttribute('download', fileName + '.xls')
          document.body.appendChild(link)
          link.click()
          document.body.removeChild(link) //下载完成移除元素
          window.URL.revokeObjectURL(url) //释放掉blob对象
        }
      })
    },
  },
}
</script>